Popup: Android screen reader accessibility #2959
Conversation
Removed the `TapGestureRecognizer` from the `PopupPage` constructor to simplify tap handling logic. Updated `PopupPageLayout` to enhance accessibility by excluding the overlay `Grid` and `PopupBorder` from the accessibility tree, ensuring only relevant popup content is accessible to assistive technologies.
Refactored the `VerticalStackLayout.Resources` section in `ButtonPopup.xaml` for better readability and consistency. Added a `Loaded` event handler (`Label_Loaded`) to the `Label` with the `Title` style to set semantic focus on load, enhancing accessibility. Implemented the `Label_Loaded` method in `ButtonPopup.xaml.cs` to handle this functionality.
Removed comments explaining the accessibility setup for the overlay Grid and PopupBorder. No functional changes were made to the accessibility behavior, as the relevant `AutomationProperties.SetIsInAccessibleTree` calls remain unchanged. The comments were likely removed for clarity or to reduce redundancy.
There was a problem hiding this comment.
Pull request overview
This PR fixes Android screen reader accessibility for the Popup component by ensuring that non-interactive container elements are excluded from the accessibility tree, allowing screen readers to properly focus on interactive and content elements within the popup.
Key Changes:
- Set
IsInAccessibleTreeto false for popup container elements (PopupPageLayout and PopupBorder) to improve screen reader navigation - Added semantic focus to the first label in the ButtonPopup sample to demonstrate proper accessibility behavior
- Applied formatting improvements to the ButtonPopup.xaml sample
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| src/CommunityToolkit.Maui/Views/Popup/PopupPage.shared.cs | Excludes popup container elements from accessibility tree to fix Android screen reader focus issues |
| samples/CommunityToolkit.Maui.Sample/Views/Popups/ButtonPopup.xaml.cs | Adds event handler to set semantic focus on the title label when loaded |
| samples/CommunityToolkit.Maui.Sample/Views/Popups/ButtonPopup.xaml | Wires up Loaded event and applies formatting improvements (tabs to spaces) |
Update Label_Loaded method with nullability and logic The `Label_Loaded` method in `ButtonPopup.xaml.cs` was updated to accept a nullable `sender` parameter by changing its signature to `void Label_Loaded(object? sender, EventArgs e)`. Additionally, the method implementation was added to check if the `sender` is of type `Label`. If so, it casts the `sender` to a `Label` and calls the `SetSemanticFocus` method on it.
|
This is the website is use to validate accessibility behaviour, as you can see this PR matches what is expected - https://www.magentaa11y.com/#/native-criteria/notifications/modal?tab=4 |
|
@TheCodeTraveler @jfversluis hoping someone can take a look at this. Plan to migrate from Mopups to the toolkit but accessibility is a legal requirement for us. |
|
@IeuanWalker thanks for this! Sorry it's taken so long for someone to look at it |
|
@bijington no prob, thanks for taking a look :) |
You're UK based right? It's a distance from Wales but will you be coming to MAUI Day next month in London? |
|
@bijington ye based in Cardiff. I want too, messaged my manager about it few days ago, not heard back yet :/ will chase him tomorrow lol Just hope there are tickets left 🤞 |
If you get approval and there are no tickets let me know 👍 |
|
@bijington got approval and a ticket 👌 Do you know what time it starts/ opens and when it ends? Need to look at booking a train for it |
Amazing news! I believe we had the venue from 08:30 but talks will only start from 09:00-09:15. And I think we have to be out by 17:30 at the latest. We will be heading to a place for a drink after if you need to kill time for the next train 👍 Also if it's easier feel free to reach out via Discord (my username is the same) and I will probably be more responsive |
3 participants
Description of Change
Fix Android screen reader accessibility
As you can see from the before video, the non-interactive elements (labels) arnt focusable to the screenreader. And the popup view itself is.
android-before.mp4
android-after.mp4
I've tested iOS and it is unchanged from before, and behaves the same as the after video on Android.
Linked Issues
PR Checklist
approved(bug) orChampioned(feature/proposal)mainat time of PRAdditional information